<template>
	<view class="container">
		<tui-sticky :recalc="recalc" :scrollTop="scrollTop" stickyHeight="104rpx" container v-for="(item, index) in viewList" :key="index">
			<template v-slot:header>
				<view class="sticky-item">
					<view class="date">{{item.date}}</view>
				</view>
			</template>
			<template v-slot:content>
				<!--内容 start-->
				<view class="list-view">
					<view class="list-item flex align-center justify-end padding-lr solid-top solid-bottom bg-white"
					v-for="(recordItem, index2) in item.records" :key="index2" @tap.stop="selectDetail" :data-key="recordItem.collectionId">
						<view class="item-image radius" :style="[{backgroundImage:'url('+ recordItem.imageUrl +')'}]"></view>
						<view class="item-content margin-left-sm">
							<view class="text-content text-grey text-lg text-cut"><text>{{recordItem.collectionName}}</text></view>
							<view class="text-content text-gray text-sm text-cut"><text>{{recordItem.basicInfo}}</text></view>
							<view class="text-content text-gray text-xs"><text>{{recordItem.viewDate}}</text></view>
						</view>
					</view>
				</view>
				<!--内容 end-->
			</template>
		</tui-sticky>
		
		<!-- <tui-loadmore v-if="loading"></tui-loadmore> -->
		<!-- 加载更多 -->
		<view class="tui-loading-more flex" v-if="viewList.length > 0 && (loading || noMore)">
			<text class="tui-loadmore-line" v-if="noMore"></text>
			<text class="tui-loading-more-text">{{ loadingText }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				viewList: [],
				loading: false,
				recalc: 1,
				pageNum: 1,
				pageSize: 10,
				noMore: false,
				loadingText: '正在加载...',
			}
		},
		onLoad() {
			this.getMemberViewList('refresh')
		},
		methods: {
			getMemberViewList(type) {
				this.fetch.request("/api/wxmini/getMemberViewList", "POST", {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, false, true, false, this)
				.then((res) => {
					if (res.code == 0) {
						let data = res.data
						if (type == 'refresh') {
							this.viewList = []
						}
						data.rows.forEach(item => {
							if (this.viewList.length == 0) {
								this.viewList.push({
									date: item.dayDate,
									records: []
								})
								this.viewList[0].records.push(item)
							} else {
								let lastDate = this.viewList[this.viewList.length - 1].date
								if (lastDate != item.dayDate) {
									this.viewList.push({
										date: item.dayDate,
										records: []
									})
									this.viewList[this.viewList.length - 1].records.push(item)
								} else {
									this.viewList[this.viewList.length - 1].records.push(item)
								}
							}
						})
						if (type == 'loadMore') {
							this.loading = false
						}
						this.sumTotal(data.total)
					}
				}).catch(() => {})
			},
			selectDetail(e){
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url:'../collection/collectionDetail?uid=' + key
				})
			},
			sumTotal(total) {
				let recordSize = 0
				this.viewList.forEach(item => {
					recordSize = recordSize + item.records.length
				})
				if (recordSize >= total) {
					this.noMore = true
					this.loadingText = '没有更多了'
				}
			}
		},
		//页面滚动执行方式
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom(e) {
			if (this.noMore || this.loading) {
				return
			}
			
			this.loading = true
			this.pageNum++
			
			this.getMemberViewList('loadMore')
		}
	}
</script>

<style>
	.container {
		/* padding-bottom: env(safe-area-inset-bottom); */
	}

	.tips::before {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	/* sticky 容器 start */
	.sticky-item {
		width: 100%;
		height: 104rpx;
		padding: 20rpx 30rpx;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	/* sticky 容器 end */

	.date {
		height: 54rpx;
		font-size: 28rpx;
		background: #fff;
		padding: 0 28rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		/* box-shadow: 0 0 1rpx #7A7A7A; */
	}

	.date::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1rpx solid #eaeef1;
		border-radius: 60rpx;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.list-view {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.list-view::after {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	.item-last::after {
		left: 0 !important
	}
	
	.list-item {
		width: 100%;
		height: 160rpx;
	}
	.item-image {
		height: 120rpx;
		width: 120rpx;
		background-size: cover;
		background-position: center;
		background-color: #ccc;
	}
	.item-content {
		width: calc(100% - 120rpx - 20rpx);
	}
	.tui-loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 15px;
		text-align: center;
		position: relative;
	}
	.tui-loadmore-line {
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #e5e5e5;
		width: 320rpx;
		position: absolute;
		z-index: -1;
	}
	
	.tui-loading-more-text {
		padding-left: 8rpx;
		padding-right: 8rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		background-color: #f1f1f1;
		text-align: center;
		color: #999;
	}
	
</style>
